<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    	<title>统战成员学习平台</title>
	    <link rel="stylesheet" type="text/css" href="../css/base.css" />
	    <link rel="stylesheet" type="text/css" href="../css/style.css" />
	</head>
	<body>
		<div id='app' style="display:none" v-show="true" class="app">
			<div class="search-btn" tapmode="tap" @click="openWin('./study/search_win')">
			    <label><img src="../image/search.png" class="search-icon" alt="">搜索课程</label>
			</div>
			<div class="app-content rdkc bg">
				<transition-group name="list" tag="ul" class="list list-kc">
					<li v-for="item of items" :key="item" @click="openLesson(item)">
						<div class="dl">
							<div class="news-img" :style="'background:url(\''+ imageBasePath + item.courseImg +'\') no-repeat center center;background-size:cover;'"></div>
				   	</div>
					  <div class="dr">
						   <div class="l1">
								<span class="l1-title">
								  {{item.courseName}}
							    </span>
						   </div>
						   <!-- <div class="l2">
							  <span class="l2-title elps">
								{{item.courseContent}}
							  </span>
						   </div> -->
						   <div class="l3">
							  <span class="l3-title">
								 <img src="../image/eye.png">
								 <span class="views">{{item.pv || 0}}<span>
							  </span>
						   </div>
					   </div>
					</li>
					<div v-if="items.length && loaded" @click="toTop()" class="no_more" key="no_more">没有更多了，点击回到顶部</div>
				</transition-group>
			</div>
			<Loading :visible="loading"></Loading>
		</div>
		<script type="text/javascript" src="../script/api.js"></script>
		<script type="text/javascript" src="../script/vue.min.js"></script>
		<script type="text/javascript" src="../script/common.js"></script>
		<script type="text/javascript" src="../script/layer_mobile/layer.js"></script>
		<script type="text/javascript">
		    new Vue({
		     	el: '#app',
		     	data: {
					imageBasePath: imageBasePath,
					url: 0,
					loading: false,
					items: [],
					pageNum: 1,
					pageSize: 10,
					loaded: false
		     	},
		     	mounted: function() {
		        	var $this = this;
		        	apiready = function() {
						$this.url = api.pageParam.url;
						$this.getList();

						onScrollToBottom(function () {
							if ($this.loaded) return;
							$this.getList();
						})

						api.setRefreshHeaderInfo({
						    bgColor: '#f5f5f9',
						    textColor: '#aaa',
						    textDown: '下拉刷新...',
						    textUp: '松开刷新...'
						}, function(ret, err) {
							$this.pageNum = 1;
							$this.loaded = false;
							$this.getList(true)
						});
                	}
		    	},
		    	methods: {
					getList: function(refresh) {
			        	var $this = this;
						if($this.loading) return;
						$this.loading = true;
						post($this.url, {
							pageNum: $this.pageNum,
							pageSize: $this.pageSize
						}, function(ret) {
							if(refresh) {
								api.refreshHeaderLoadDone();
								$this.items = []
							}
							if(ret.isSuccess){
								ret.data.list.forEach(function(item) {
									$this.items.push(item)
								});
								$this.loading = false;
								ret.data.pages === ret.data.pageNum ? $this.loaded = true : $this.pageNum++;
							} else {
								msgUtil.toast({
								    msg: ret.message
								})
							}
						})
					},
					openLesson: function(item) {
						openWin('./study/study_win', {courseId: item.courseId});
						setTimeout(function() {
							item.pv++
						}, 500);
					},
					toTop: function() {
						api.pageUp({'top': true}, function(){})
					}
		    	}
		    });
		</script>
	</body>
</html>
